:root {
  --primary-brown: #8d6748;
  --primary-brown-dark: #6e4f32;
  --primary-brown-light: #bfa084;
  --background: #f9f6f2;
  --card-bg: #fff;
  --text-main: #4e3b2c;
  --text-light: #a58b74;
  --border-radius: 12px;
  --shadow: 0 4px 24px rgba(141, 103, 72, 0.08);
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  background-color: var(--background);
  color: var(--text-main);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary-brown-dark);
  margin-bottom: 0.5em;
}

a {
  color: var(--primary-brown);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--primary-brown-dark);
}

button, .el-button {
  border-radius: var(--border-radius);
  background: linear-gradient(90deg, var(--primary-brown), var(--primary-brown-light));
  color: #fff;
  border: none;
  box-shadow: var(--shadow);
  transition: background 0.2s, box-shadow 0.2s;
}
button:hover, .el-button:hover {
  background: var(--primary-brown-dark);
  box-shadow: 0 6px 32px rgba(141, 103, 72, 0.15);
}

.el-card, .card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 2em;
  margin-bottom: 2em;
}

.el-table, .el-table th, .el-table td {
  background: var(--card-bg) !important;
  color: var(--text-main);
  border-radius: var(--border-radius);
}
.el-table th {
  background: var(--primary-brown-light) !important;
  color: var(--primary-brown-dark);
}
.el-table__row:hover {
  background: #f3e7db !important;
}

.el-pagination {
  margin-top: 1.5em;
}

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

::-webkit-scrollbar {
  width: 8px;
  background: var(--background);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-brown-light);
  border-radius: 8px;
}

@media (max-width: 900px) {
  #app {
    padding: 0.5rem;
  }
  .el-card, .card {
    padding: 1em;
  }
}
